<template>
	<view class="around-wrap">
		<!-- 头部 -->
		<view class="header">
			<uni-nav-bar 
			:status-bar="true" 
			fixed 
			title="周边商家" 
			leftIcon="back" 
			@clickLeft="clickLeft"
			>
			</uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="content-list" v-if="aroundMerchantsList.length > 0">
				<view class="content-list-item" v-for="(item, index) in aroundMerchantsList" :key="index" @click="toAroundDetilsPage(item)">
					<view class="left">
						<image class="left-image" :src="item.fileIds" @error="handleImageError(index)"></image>
					</view>
					<view class="right">
						<view class="right-title">{{item.peripheralName}}</view>
						<view class="right-address-wrap">
							<uni-icons type="location-filled"></uni-icons>
							<view>{{item.address}}</view>
						</view>
					</view>
				</view>
				<!-- 加载更多，没有数据，加载中 -->
				<uni-load-more :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orgId: '',
				imgHeaderUrl: '',
				currentPage: 1,
				numPerPage: 15,
				totalPage: 0,
				aroundMerchantsList: [],
				status: 'more'
			}
		},
		onLoad(option) {
			this.orgId = this.$store.state.orgId
			console.log('周边商家的option', option)
			console.log('%%%%%%%%%%%%', uni.getStorageSync('imgServer'))
			let {host, port} = uni.getStorageSync('imgServer')
			this.imgHeaderUrl = host + ':' + port + '/img/'
			this.init()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh()
			this.getAroundMerchantsList(this.currentPage,this.numPerPage,this.orgId)
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.currentPage < this.totalPage) {
				this.status = 'more';
				this.getAroundMerchantsList(this.currentPage++,this.numPerPage,this.orgId)
			} else {
				this.status = 'noMore'
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			init () {
				this.getAroundMerchantsList(this.currentPage,this.numPerPage,this.orgId)
			},
			getAroundMerchantsList(currentPage, numPerPage, orgId) {
			  this.status = 'loading';
			  let params = {currentPage, numPerPage, orgId}
			  this.$request.ygstPeripheralFoodShoppageGet(params).then(res => {
				console.log('进来周边商家详情页咯！！！res++++%%%', res)
				if (this.$utils.isEmptyObject(res)) {
				  return
				}
				res.resultList.filter(item => {
					item.fileIds = this.imgHeaderUrl + item.fileIds[0]
				})
				this.totalPage = res.totalPage
				this.aroundMerchantsList = this.aroundMerchantsList.concat(res.resultList)
			  })
			},
			handleImageError(i) {
				this.$set(this.aroundMerchantsList[i], 'fileIds', '../../static/img/common/has_img_icon.png')
			},
			toAroundDetilsPage(item) {
				console.log('item', item)
				uni.navigateTo({
					url: `../aroundDetils/aroundDetils?peripheralId=${item.peripheralId}&peripheralName=${item.peripheralName}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.around-wrap {
		.content {
			.content-list {
				.content-list-item {
					box-sizing: border-box;
					padding: 20rpx 36rpx;
					border-bottom: 1rpx solid #ccc;
					display: flex;
					align-items: center;
					.left {
						flex: 0 0 220rpx;
						height: 180rpx;
						.left-image {
							width: 220rpx;
							height: 180rpx;
						}
					}
					.right {
						flex: 1;
						padding-left: 20rpx;
						box-sizing: border-box;
						.right-title {
							font-weight: bold;
							font-size: 30rpx;
							box-sizing: border-box;
							padding: 10rpx 0rpx 10rpx 10rpx;
						}
						.right-address-wrap {
							padding: 10rpx 0rpx;
							box-sizing: border-box;
							display: flex;
						}
					}
				}
			}
		}
	}
</style>
